<script setup>

import router from "@/router/index.js";
import {ref} from "vue";
import axios from "axios";
import {useUserStore} from "@/stores/UserStore.js";

const user = ref(useUserStore().getUserText || '');
const bot = ref(useUserStore().getBot || '');
const input = ref("")

function autoResize(event) {
  const textarea = event.target;
  textarea.style.height = "38px"; // 先重置高度，防止撑开后收不回去
  textarea.style.height = textarea.scrollHeight + "px";
}

function data(event) {
  let time = 30
  if (!input.value) return;
  user.value = input.value;
  useUserStore().setUserText(user.value);
  input.value = "";
  event.target.style.height = "38px"
  bot.value = "AI 回复中...";
  let timing, timing2;
  timing = setInterval(() => {
    bot.value = `与贴吧老哥探讨中，预计${time}秒`;
    time -= 1
    if (time === 0) {
      clearInterval(timing);
      timing2 = setInterval(() => {
        bot.value = `预计需要更长时间,已使用${time + 1}秒`
        time += 1
      }, 1000);
    }
  }, 1000)

  axios.post("http://localhost:3000/chat",
      {message: user.value}, // 发送 JSON 数据
      {headers: {"Content-Type": "application/json"}} // 确保是 JSON 格式
  )
      .then(res => {
        clearInterval(timing)
        clearInterval(timing2)
        let reply = res.data.reply;

        let charIndex = 0;

        bot.value = '';

        const interval = setInterval(() => {
          // 输出下一个字符
          bot.value += reply.charAt(charIndex);
          charIndex++;

          // 如果所有字符都已经输出完，停止定时器
          if (charIndex === reply.length) {
            useUserStore().setBotText(bot.value)
            clearInterval(interval);
          }
        }, 30);

      })
      .catch(err => {
        console.error("请求错误:", err);
        clearInterval(time)
        clearInterval(timing2)
        bot.value = "机器人走丢了哦！";
      });
}

const userStore = useUserStore()
</script>

<template>
  <div class = "header border">
    <span class = "back border" @click = "router.back()"><svg t = "1738806608812" class = "icon"
                                                              viewBox = "0 0 1024 1024" version = "1.1"
                                                              xmlns = "http://www.w3.org/2000/svg" p-id = "4175"
                                                              width = "32" height = "32">
          <path
              d = "M461.994667 512l211.2 211.2-60.330667 60.373333L341.333333 512l271.530667-271.530667 60.330667 60.330667-211.2 211.2z"
              fill = "#000000" p-id = "4176"></path>
        </svg>
    </span>
    <span class = "title border">Bot (测试阶段)</span>
  </div>
  <div class = "messageBox border mt-2">
    <div class = " mt-2 user d-flex">
      <template v-if = "user">
        <div class = "userContent p-2">
          {{ user }}
        </div>
        <div class = "UserImg border">
          <img :src = "'src/assets/' + userStore.getUserInfo.userAvatar" width = "48" height = "48" alt = "">
        </div>
      </template>
    </div>
    <div class = " mt-2 bot d-flex">
      <template v-if = "bot">
        <div class = "botImg border">
          <img src = "@/assets/logo.svg" width = "48" alt = "">
        </div>
        <div class = "content p-2" id = "talk">
          {{ bot }}
        </div>
      </template>
    </div>
  </div>
  <div class = "messageInput">
    <textarea ref = "textarea" @keyup.enter.prevent = "data" id = "tx" class = "p-1" @input = "autoResize"
              v-model = "input" placeholder = "输入文字"></textarea>
  </div>
</template>

<style scoped>
* {
  position: relative;
  margin: 0;
  padding: 0;
}

span {
  display: block;
}

.header {
  display: flex;
}

.back {
  width: 40px;
}

.title {
  width: 82%;
  text-align: center;
  line-height: 30px;
  font-size: 18px;
}

.botImg {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}

.messageBox {
  height: 800px;
  overflow-x: hidden;
  overflow-y: auto;
}

.messageBox::-webkit-scrollbar {
  display: none;
}

.botImg img {
  position: absolute;
  top: 10px;
}

.content {
  margin-left: 10px;
  width: 70%;
  border-radius: 1px 10px 10px;
  background-color: rgba(128, 128, 128, 0.2);
}

input {
  background-color: rgba(128, 128, 128, 0.1);
  color: rgba(0, 0, 0, 0.8);
  height: 200px;
}

textarea {
  position: relative;
  resize: none;
  border: none;
  outline: none;
  width: 100%;
  height: 38px;
  max-height: 300px;
  overflow: hidden;
}

.userContent {
  margin-left: 14%;
  width: 70%;
  border-radius: 10px 1px 10px 10px;
  background-color: rgba(128, 128, 128, 0.2);
}

.UserImg {
  margin-left: 6px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  overflow: hidden;
}

.UserImg img {
  position: absolute;
  top: -5px;
}
</style>